<template>
  <div class="content-view">
    <div class="table-head-tool">
      <Button type="primary" @click="showAddWarp">新增</Button>

      <Form ref="formInline" :model="gridOption.param.seachOption" inline :label-width="80">
        <FormItem :label-width="20" class="flex">
          <Select v-model="gridOption.param.seachOption.key" style="width: 120px" :placeholder="seachTypePlaceholder">
            <Option v-for="item in seachTypes" :value="item.key" :key="item.key">{{ item.value }}</Option>
          </Select>
          <Input class="ml10" v-model="gridOption.param.seachOption.value" style="width: 200px" search placeholder="请输入关键字" @on-search="query(1)" />
        </FormItem>

        <FormItem>
          <Button type="default" @click="exportCsv">导出</Button>
        </FormItem>
      </Form>
    </div>
    <div class="table-body">
      <tables :columns="listColumns" :value="gridOption.data" :pageOption="gridOption.param.pageOption" @changePage="query"></tables>
    </div>
    <editModal ref="editModal" :columns="editColumns" :rules="gridOption.rules"> </editModal>
  </div>
</template>
<script>
import funTool from '@/libs/funTool'
import uiTool from '@/libs/uiTool'
import modelServer from '@/api/system_high/modelServer.js'
import vip_memberServer from '@/api/vip/vip_member_server.js'

export default {
  data() {
    let rules = {}

    rules['nick_name'] = [{ required: true, message: '请填写昵称' }]
    rules['open_id'] = [{ required: true, message: '请填写open_id' }]
    rules['head_portrait'] = [{ required: true, message: '请填写头像' }]
    rules['66'] = [{ required: true, message: '请填写66' }]
    rules['hh'] = [{ required: true, message: '请填写1' }]
    rules['99'] = [{ required: true, message: '请填写99' }]
    rules['jjjj'] = [{ required: true, message: '请填写jjjj' }]
    rules['555'] = [{ required: true, message: '请填写333' }]
    return {
      seachTypes: [
        { key: 'nick_name', value: '昵称' },
        { key: 'open_id', value: 'open_id' },
        { key: 'head_portrait', value: '头像' },
        { key: '66', value: '66' },
        { key: 'hh', value: '1' },
        { key: '99', value: '99' },
        { key: 'jjjj', value: 'jjjj' },
        { key: '555', value: '333' }
      ],
      gridOption: {
        param: {
          seachOption: { key: '', value: '' },
          pageOption: {
            total: 0,
            page: 1,
            pageSize: 20
          }
        },
        rules,
        columns: [
          { key: 'id', title: 'id', width: '80px', is_show_edit: 0 },

          { key: 'nick_name', title: '昵称', disabled: false, is_show_edit: 1, is_show_list: 1, com: 'Input' },
          { key: 'open_id', title: 'open_id', disabled: false, is_show_edit: 1, is_show_list: 1, com: 'Input' },
          {
            key: 'head_portrait',
            title: '头像',
            com: 'UploadSingle',
            disabled: false,
            is_show_edit: 1,
            is_show_list: 1,
            render: (h, params) => {
              return <img src={params.row['head_portrait']} style={{ width: '100px', height: '100px' }} />
            }
          },

          { key: '66', title: '66', disabled: false, is_show_edit: 1, is_show_list: 1, com: 'Input' },
          { key: 'hh', title: '1', disabled: false, is_show_edit: 1, is_show_list: 1, com: 'Input' },
          { key: '99', title: '99', disabled: false, is_show_edit: 1, is_show_list: 1, com: 'Input' },
          { key: 'jjjj', title: 'jjjj', disabled: false, is_show_edit: 1, is_show_list: 1, com: 'Input' },
          { key: '555', title: '333', disabled: false, is_show_edit: 1, is_show_list: 1, com: 'Input' },
          { key: 'created_date', title: '创建时间', width: '100px', is_show_edit: 0 },
          { key: 'updated_date', title: '更新时间', width: '100px', is_show_edit: 0 },
          {
            title: '操作',
            key: 'action',
            width: '200px',
            type: 'template',
            render: (h, params) => {
              let btns = [
                {
                  title: '修改',
                  type: 'primary',
                  click: () => {
                    this.showEditWarp(params.row)
                  }
                },
                {
                  title: '删除',
                  type: 'primary',
                  click: () => {
                    this.delConfirm(params.row)
                  }
                }
              ]

              return uiTool.getBtn(h, btns)
            }
          }
        ],
        data: []
      }
    }
  },
  computed: {
    seachTypePlaceholder() {
      return this.seachTypes
        .map((p) => p.value)
        .slice(0, 3)
        .join('/')
    },
    editColumns() {
      let editTempColumns = this.gridOption.columns.filter((p) => p.is_show_edit === 1)
      return editTempColumns
    },
    listColumns() {
      let listTempColumns = this.gridOption.columns.filter((p) => p.is_show_list !== 0)
      return listTempColumns
    }
  },

  mounted() {
    this.init()
    this.initCol()
  },
  methods: {
    init() {
      this.query(1)
    },
    async initCol() {
      let columnRows = []
      let columnKeys = columnRows.map((p) => p.key)
      let newColumns = this.gridOption.columns.filter((p) => columnKeys.indexOf(p.key) > -1)
      for (let i = 0; i < newColumns.length; i++) {
        let curColumn = newColumns[i]
        let modelMap = columnRows[i].map_option
        let res = await modelServer.interface({ model_key: columnRows[i].modelKey, map_option: modelMap })
        curColumn.source = res.data
      }
    },

    async inquiry() {
      let res = await vip_memberServer.all(this.gridOption.param)
      this.gridOption.data = res.data
    },

    async query(page) {
      if (page) {
        this.gridOption.param.pageOption.page = page
      }

      let res = await vip_memberServer.page(this.gridOption.param)
      this.gridOption.data = res.data.rows
      this.gridOption.param.pageOption.total = res.data.count
    },
    async showAddWarp() {
      this.$refs.editModal.addShow({ 66: '1' }, async (newRow) => {
        let res = await vip_memberServer.add(newRow)
        rootVue.$Message.success('新增成功！')
        this.init()
      })
    },
    async showEditWarp(row) {
      this.$refs.editModal.editShow(row, async (newRow) => {
        let valid = await this.$refs['editModal'].$refs['From'].validate()
        if (valid) {
          let res = await vip_memberServer.edit(newRow)
          rootVue.$Message.success('修改成功！')
          this.init()
        }
      })
    },

    async delConfirm(row) {
      uiTool.delConfirm(async () => {
        await vip_memberServer.del(row)
        rootVue.$Message.success('删除成功！')
        this.init()
      })
    },

    async exportCsv(row) {
      await vip_memberServer.exportCsv(row)
    }
  }
}
</script>

<style lang="less"></style>
